//由于webpack 是基于node 进行构建的 所有webpack的配置文件中 任何合法的
// node代码 都是支持的
var path=require("path");
// 当以命令行形式运行webpack 或 webpack-dev-server的时候 工具会发现 我们并没有
// 提供要打包的文件入口和出口文件 此时他会检查 项目根目录中的配置文件 并读取这个文件
// 就拿到了导出的这个配置对象 然后根据这个对象 进行打包构建
//在内存中 根据指定的页面 生成一份内存中的首页 同时把自动打包好的bundle注入页面底部
// 如果要配置插件 需要在导出的对象中 挂在一个plugin 节点
var htmlWebpackPlugin=require('html-webpack-plugin')
var VueLoaderPlugin=require('vue-loader/lib/plugin')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'bundle.js'//指定输出文件的名称
    },
   plugins:[
       new htmlWebpackPlugin({
           template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
           filename:'index.html'//这只生成的内存页面名称
       }),
       new VueLoaderPlugin()
   ],
   module:{
       rules:[
           {test:/\.css$/,use:['style-loader','css-loader']},
           {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
           {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
        //    {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=28148&name=[name].[ext]'},//处理图片路径的loader
        // {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=28148'},
        {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=28148&name=[hash:8]-[name].[ext]'},
        {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
        {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
         {test:/\.vue$/,use:'vue-loader'}
        
           //limit 给定的值 是图片大小 单位是 byte 如果我们引用的图片 大于或等于
           //给定的 limit值 则不会被转为base64格式的字符串 如果图片小于给定的limit值、
        //    则会被转为base64的字符串

       ]
   },
   resolve:{
       alias:{
        //    "vue$":"vue/dist/vue.js"
       }
   }
}